<template>
  <div>
    <div class="group-operation-title-box">
      <div class="group-operation-title">
        <div class="large-title">经营数据</div>
        <div class="small-title">年累计</div>
      </div>
      <div class="dropdown-box">
        <span class="pointer el-dropdown-link">
          <i class="el-icon-s-data"></i>
          变化趋势
        </span>
      </div>
    </div>

    <el-table class="group-operation-table" :data="tableData" style="width: 100%; margin-bottom: 50px" border row-key="primaryKey" :tree-props="{children: 'children'}">
      <el-table-column width="120" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.monthShow }}
        </template>
      </el-table-column>

      <el-table-column label="计划年总收入（权责）" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.planRightsIn | formatMoney }}
        </template>
      </el-table-column>

      <el-table-column label="预测年总收入（权责）" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.forecastRightsIn | formatMoney }}
        </template>
      </el-table-column>

      <el-table-column label="偏差" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
          <div @click="cellClick(scope.row, 1)" v-if="defaultShow(scope.row.rightsIncomeDeviation)">
            {{ scope.row.rightsIncomeDeviation | formatMoney }}
          </div>
          <div v-else class="pointer" @click="cellClick(scope.row, 1)" :class="[(scope.row.rightsIncomeDeviation + '').includes('-') ? 'down' : 'up']">
            {{ scope.row.rightsIncomeDeviation | formatMoney }}
            <i :class="(scope.row.rightsIncomeDeviation + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="偏差环比" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
          <template v-if="defaultShow(scope.row.rightsIncomeDeviationRate)">
            {{ scope.row.rightsIncomeDeviationRate }}
          </template>
          <div v-else class="pointer" :class="[(scope.row.rightsIncomeDeviationRate + '').includes('-') ? 'down' : 'up']">
            {{ scope.row.rightsIncomeDeviationRate }}
            <i :class="(scope.row.rightsIncomeDeviationRate + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="计划年总收入（现金流）" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.planCashIn | formatMoney }}
        </template>
      </el-table-column>

      <el-table-column label="预测年总收入（现金流）" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.forecastCashIn | formatMoney }}
        </template>
      </el-table-column>

      <el-table-column label="偏差" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
          <div @click="cellClick(scope.row, 2)" v-if="defaultShow(scope.row.cashIncomeDeviation)">
            {{ scope.row.cashIncomeDeviation | formatMoney }}
          </div>
          <div v-else class="pointer" @click="cellClick(scope.row, 2)" :class="[(scope.row.cashIncomeDeviation + '').includes('-') ? 'down' : 'up']">
            {{ scope.row.cashIncomeDeviation | formatMoney }}
            <i :class="(scope.row.cashIncomeDeviation + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="偏差环比" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
          <template v-if="defaultShow(scope.row.cashIncomeDeviationRate)">
            {{ scope.row.cashIncomeDeviationRate }}
          </template>
          <div v-else class="pointer" :class="[(scope.row.cashIncomeDeviationRate + '').includes('-') ? 'down' : 'up']">
            {{ scope.row.cashIncomeDeviationRate }}
            <i :class="(scope.row.cashIncomeDeviationRate + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="计划年总支出（现金流）" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.planCashOut | formatMoney }}
        </template>
      </el-table-column>

      <el-table-column label="预测年总支出（现金流）" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.forecastCashOut | formatMoney }}
        </template>
      </el-table-column>

      <el-table-column label="偏差" width="200" header-align="center" align="center">
        <template slot-scope="scope">
          <div @click="cellClick(scope.row, 3)" v-if="defaultShow(scope.row.cashIncomeOutDeviation)">
            {{ scope.row.cashIncomeOutDeviation | formatMoney }}
          </div>
          <div v-else class="pointer" @click="cellClick(scope.row, 3)" :class="[(scope.row.cashIncomeOutDeviation + '').includes('-') ? 'up' : 'down']">
            {{ scope.row.cashIncomeOutDeviation | formatMoney }}
            <i :class="(scope.row.cashIncomeOutDeviation + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="偏差环比" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <template v-if="defaultShow(scope.row.cashIncomeOutDeviationRate)">
            {{ scope.row.cashIncomeOutDeviationRate }}
          </template>
          <div v-else class="pointer" :class="[(scope.row.cashIncomeOutDeviationRate + '').includes('-') ? 'up' : 'down']">
            {{ scope.row.cashIncomeOutDeviationRate }}
            <i :class="(scope.row.cashIncomeOutDeviationRate + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <deviation-popup ref="deviationPopup" :dialog-type="dialogType" :select-time="selectTime" />
  </div>
</template>
<script>
  import deviationPopup from './deviationPopup';
  import { apiExecutePlanStatistics } from '../../groupOperation/api/index';
  import { guid } from '@/common/js/utils';

  export default {
    props: {
      selectTime: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        tableData: [],
        dialogType: null,
        status: false,
        dialogMonth: null,
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      async getList() {
        this.tableData = [];

        let res = await apiExecutePlanStatistics({
          primaryKey: this.$route.query.planKey ? this.$route.query.planKey : null,
          status: this.status,
        });
        if (res.rows && res.rows.length > 0) {
          res.rows.forEach(item => {
            item.primaryKey = item.primaryKey ? item.primaryKey : 'self' + guid()
          })
          
          let rows1 = JSON.parse(JSON.stringify(res.rows));
          rows1.shift()
          let rows2 = [res.rows[0]]
          rows2[0].children = rows1
          this.tableData = rows2
        }
      },
      dataControl() {
        this.status = !this.status;
        this.getList();
      },
      cellClick(row, type) {
        this.dialogType = type;
        this.dialogMonth = row.month;
        this.$refs.deviationPopup.showFurther = true;
        this.$nextTick(() => {
          this.$refs.deviationPopup.getList(row);
        });
      },
      defaultShow(value) {
        if (value + '' === '-' || value == 0 || !value) {
          return true;
        }
      },
    },
    components: {
      deviationPopup,
    },
  };
</script>

<style lang="scss" scoped>
::v-deep .el-table__indent{
  padding: 0!important;
}
</style>
